<template>
    <app-layout :haveBackground="false">
        <view class="main-between cross-center title" :class="toggle ? 'toggle' : ''">
            <view class="title-name" :style="{'border-color': admin == 1 ? adminColor : getTheme.border,'color': admin == 1 ? adminColor : getTheme.color}">第{{week_number}}期</view>
            <view @click="toggle = !toggle" class="dir-left-nowrap cross-center">
                <view>更多期次</view>
                <image src="./../image/arrow.png"></image>
            </view>
        </view>
        <view class="order-list" v-if="detail && admin == 0">
            <view class="order-item">
                <view class="main-between cross-center order-info">
                    <view>订单号：{{order_no}}</view>
                    <view :style="{'color': getTheme.color}" class="order-status">{{detail.order && detail.order.is_sale == 1 ? '已完成' :detail.order && detail.order.new_status > 1 ? '已关闭' :detail.is_send == 0 ? '待发货' : detail.is_confirm == 1 ? '已收货' : '待收货'}}</view>
                </view>
                <view class="order-goods dir-left-nowrap cross-center">
                    <image class="goods-image" :src="detail.goods_info.goods_attr.cover_pic"></image>
                    <view class="goods box-grow-1">
                        <view class="goods-name t-omit-two">{{detail.goods_info.goods_attr.name}}</view>
                        <view class="t-omit">
                            <text class="attr-group" v-for="(attr,idx) in detail.goods_info.attr_list" :key="idx">
                                <text class="attr-group-name">{{attr.attr_group_name}}：</text>
                                <text>{{attr.attr_name}}</text>
                            </text>
                        </view>
                        <view class="main-between cross-center">
                            <view class="goods-number">x{{detail.goods_info.goods_attr.number}}</view>
                            <view class="goods-weekly">x{{detail.goods_info.goods_attr.week_number}}期</view>
                        </view>
                    </view>
                </view>
                <view v-if="detail.is_send == 1 && detail.is_confirm == 0 && detail.order && detail.order.new_status < 2 && detail.order.is_confirm == 0 && detail.order.is_sale == 0" class="dir-right-nowrap" style="padding-bottom: 20rpx">
                    <view @click="submitConfirm" :style="{'border-color': getTheme.border,'color': getTheme.color}" class="delay-btn">确认收货</view>
                </view>
                <view class="main-between cross-center order-other" v-if="detail.is_send == 0 && detail.order && detail.order.new_status < 2 && detail.order.is_confirm == 0 && detail.order.is_sale == 0">
                    <view class="order-weekly dir-left-nowrap cross-center" v-if="detail.is_delay == 0">
                        <image src="/static/image/icon/clock.png"></image>
                        <view>{{detail.send_time}} 配送</view>
                    </view>
                    <view class="order-weekly" v-else>已顺延</view>
                    <view class="btn dir-right-nowrap cross-center">
                        <view v-if="detail.send_type == 1" @click='getClerkCode(item)' :style="{'background': getTheme.background_gradient_btn}" class="delay-btn clerk">核销码</view>
                        <view @click="submitDelay(detail.is_delay)" :style="{'border-color': getTheme.border,'color': getTheme.color, 'opacity' : detail.is_delay > 1 ? '0.5' : '1'}" class="delay-btn">{{detail.is_delay == 0 ? '顺延' : '取消顺延'}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="express-box-info" v-if="detail && detail.is_send == 1 && detail.send_type == 0 && admin == 0 && detail.express && detail.express.send_type == 1">
            <view class="express-title">物流信息</view>
            <view class='dir-top-wrap box-grow-1'>
                <view class='dir-left-nowrap cross-center express-item'>
                    <text class='box-grow-0 label'>物流状态:</text>
                    <text class='box-grow-0 sign-text'>
                        {{expressDetail.status_text ? expressDetail.status_text : '未知'}}
                    </text>
                </view>
                <view class='dir-left-nowrap cross-center express-item'>
                    <text class='box-grow-0 label'>快递公司:</text>
                    <text class='box-grow-0'>{{detail.express.express}}</text>
                </view>
                <view class='dir-left-nowrap cross-center express-item'>
                    <text class='box-grow-0 label'>快递单号:</text>
                    <text class='box-grow-1'>{{detail.express.express_no}}</text>
                    <view @click='copyText' class='box-grow-0 main-center cross-center detail-btn'>复制</view>
                </view>
            </view>
        </view>
        <view v-if="detail && detail.is_send == 1 && detail.send_type == 0 && admin == 0 && detail.express && detail.express.send_type == 1" class='logistics-box dir-top-wrap'>
            <block v-if='expressDetail.list'>
                <view class='item-box'>
                    <view v-for='item in expressDetail.list' :key='item.id'
                          :class="{'sign-text': index == 0 ? true : false}" class='dir-top item'>
                        <image v-if='index == 0' class='sign-big'
                               src='/static/image/icon/order/point-green.png'></image>
                        <image v-else class='sign' src='/static/image/icon/order/point-gray.png'></image>
                        <view>{{item.desc}}</view>
                        <view>{{item.datetime}}</view>
                    </view>
                </view>
            </block>
            <view v-else class='main-center empty-box'>
                <view>暂无物流信息</view>
            </view>
        </view>
        <view class="express-list" v-if="detail && admin == 1 && detail.is_delay == 0">
            <view class="express-info main-between cross-center" v-if="detail.send_type != 1">
                <view class="express-label">发货时间</view>
                <view>{{detail.express ? detail.express.created_at : ''}}</view>
            </view>
            <view class="express-info main-between cross-center" :class="detail.send_type != 2 ? 'no-border':''">
                <view class="express-label">{{detail.send_type == 1 ? '核销时间' : '收货时间'}}</view>
                <view>{{detail.confirm_time ? detail.confirm_time : ''}}</view>
            </view>
            <view class="express-info main-between cross-center no-border" v-if="detail.send_type == 2">
                <view class="express-label">配送方式</view>
                <view>{{detail.express.send_type == 1 ? '第三方配送' : '商家配送'}}</view>
            </view>
        </view>
        <view class="delay-info" v-if="detail && admin == 1 && detail.is_delay > 0">
            该期订单已顺延，无物流信息
        </view>
        <view class="express-list" v-if="detail && detail.express && admin == 1 && detail.send_type == 0 && detail.is_delay == 0">
            <view class="express-info main-between cross-center">
                <view class="express-label">快递公司</view>
                <view>{{detail.express.express}}</view>
            </view>
            <view class="express-info main-between cross-center">
                <view class="express-label">物流单号</view>
                <view>{{detail.express.express_no}}</view>
            </view>
            <view class="express-info main-between cross-top" v-if="detail.express.send_type == 2">
                <view class="express-label">物流内容</view>
                <view>{{detail.express.express_content}}</view>
            </view>
            <view v-if="detail.express && detail.express.express_no" @click="toExpressInfo" class="express-info main-between cross-center" >
                <view class="express-label">查看物流状态</view>
                <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
            </view>
            <view class="express-remark">
                <view class="express-label">商家留言</view>
                <view>{{detail.express.merchant_remark}}</view>
            </view>
        </view>
        <view class="express-list" v-if="detail && detail.express && admin == 1 && detail.send_type == 1 && detail.is_delay == 0">
            <view class="express-info main-between cross-center">
                <view class="express-label">核销员</view>
                <view>{{detail.express.clerk_name}}</view>
            </view>
            <view class="express-info main-between cross-center">
                <view class="express-label">核销门店</view>
                <view>{{detail.express.store_name}}</view>
            </view>
            <view class="express-remark">
                <view class="express-label">核销备注</view>
                <view>{{detail.express.clerk_mark}}</view>
            </view>
        </view>
        <view v-if="detail && detail.send_type == 2 && detail.is_delay == 0 && detail.is_send == 1 && expressData" class="city-box dir-top-nowrap">
            <view v-if="detail.send_type == 2 && detail.express && detail.express.send_type == 1">
                <map style="width: 100%; height: 300px;margin-bottom: 30rpx;" :latitude="latitude" :longitude="longitude" :markers="covers">
                </map>
            </view>
            <view class="main-between cross-center express-status">
                <view class="status-label">{{expressData.status_text}}</view>
                <view class="corporation-box dir-left-nowrap">
                    <image class="corporation-icon" :src="expressData.corporation_icon"></image>
                    <view class="corporation-name">{{expressData.corporation_name}}</view>
                </view>
            </view>
            <view class="dir-left-nowrap cross-center city-service">
                <image class="head" src="/static/image/icon/delivery-avatar.png"></image>
                <view class="info-box dir-top-nowrap box-grow-1">
                    <template v-if="expressData.city_name && expressData.city_mobile">
                        <view class="info-man">{{expressData.city_name}} {{expressData.city_mobile}}</view>
                    </template>
                    <template v-else>
                        <view class="await-man">等待分配骑手</view>
                    </template>
                </view>
                <view class="icon-box" v-if="orderDetail.city_mobile && orderDetail.city_mobile.length > 0">
                    <app-jump-button open_type="tel" :number="expressData.city_mobile">
                        <image class="icon" src="/static/image/icon/tel.png"></image>
                    </app-jump-button>
                </view>
            </view>
        </view>
        <view class="dialog" v-if="toggle">
            <view class="toggle-list">
                <view @click="chooseNumber(item)" class="toggle-item main-between cross-center" v-for="(item,index) in weekly" :key="index" :style="{'color':item.is_choose ? admin == 1 ? adminColor : getTheme.color: ''}">
                    <view>{{item.name}}</view>
                    <image :style="{'background-color': admin == 1 ? adminColor : getTheme.background}" v-if="item.is_choose" src="./../image/active.png"></image>
                </view>
            </view>
        </view>
        <!-- 核销码展示 -->
        <view v-if='is_qrcode' class='qrcode-box'>
            <view class='dir-top-wrap main-center cross-center item'>
                <view>核销码</view>
                <image class='img' :src='qr_code_url'></image>
                <image @click='closeQrcode' src='/static/image/icon/icon-close.png' class='remove'></image>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState,mapGetters } from "vuex";

    export default {
        data() {
            return {
                is_show: false,
                latitude: 39.909,
                longitude: 116.39742,
                // 顺序是 配送员位置 用户位置 商家位置
                covers: [{
                    latitude: 0,
                    longitude: 0,
                    iconPath: '',
                    width: 50,
                    height: 50
                }, {
                    latitude: 0,
                    longitude: 0,
                    // #ifndef MP-ALIPAY
                    iconPath: "./../image/my.png",
                    // #endif
                    // #ifdef MP-ALIPAY
                    iconPath: "/pages/order/image/my.png",
                    // #endif
                    width: 50,
                    height: 50
                },
                {
                    latitude: 0,
                    longitude: 0,
                    // #ifndef MP-ALIPAY
                    iconPath: "./../image/shop.png",
                    // #endif
                    // #ifdef MP-ALIPAY
                    iconPath: "/pages/order/image/shop.png",
                    // #endif
                    width: 50,
                    height: 50
                }],
                expressData: {},
                adminColor: '#446dfd',
                expressDetail: null,
                week_number: 1,
                admin: 0,
                toggle: false,
                is_qrcode: false,
                order_id: 0,
                order_no: '',
                qr_code_url: '',
                weekly: [],
                detail: null
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.info,
            }),
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
        },
        methods: {
            copyText() {
                this.$utils.uniCopy({
                    data: this.detail.express.express_no,
                    success: function () {
                        uni.showToast({
                            title: '复制成功',
                            icon: 'none',
                        })
                    }
                });
            },
            toExpressInfo(item) {
                uni.navigateTo({
                    url: '/pages/app_admin/express/express?id='+this.order_id+'&express='+this.detail.express.express+'&express_no='+this.detail.express.express_no+'&customer_name='+this.detail.express.customer_name
                })
            },
            getExpressDetail(express,express_no, customer_name) {
                this.$showLoading();
                this.$request({
                    url: this.$api.order.express_detail,
                    data: {
                        express: express,
                        customer_name: customer_name,
                        express_no: express_no
                    }
                }).then(response => {
                    this.$hideLoading();
                    this.is_show = true;
                    if (response.code === 0) {
                        this.expressDetail = response.data.express;
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                });
            },
            getClerkCode() {
                let self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.order.clerk_qr_code,
                    data: {
                        id: self.order_id
                    }
                }).then(response => {
                    self.$hideLoading();
                    if (response.code === 0) {
                        self.qr_code_url = response.data.file_path;
                        self.is_qrcode = true;
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    self.$hideLoading();
                });
            },
            closeQrcode() {
                this.is_qrcode = false;
            },
            chooseNumber(item) {
                this.toggle = !this.toggle;
                this.week_number = item.number
                this.getDetail(item.number)
            },
            getDetail() {
                uni.showLoading();
                this.detail = null;
                this.weekly = [];
                this.$request({
                    url: this.admin == 1 ? this.$api.weekly_buy.admin_express : this.$api.weekly_buy.express_detail,
                    data: {
                        order_id: this.order_id,
                        week_number: this.week_number,
                    },
                    method: 'post'
                }).then(response=>{
                    this.$hideLoading();
                    uni.hideLoading();
                    if(response.code === 0) {
                        this.detail = response.data;
                        if(this.detail.is_send == 1 && this.detail.send_type == 0 && this.admin == 0 && this.detail.express.send_type == 1) {
                            this.getExpressDetail(this.detail.express.express,this.detail.express.express_no, this.detail.express.customer_name)
                        }
                        if(this.detail.is_send == 1 && this.detail.send_type == 2 && this.detail.express.send_type == 1) {
                            this.getExpressInfo(this.detail.express.id)
                        }
                        let count = +this.detail.count + 1
                        for(let i = 1;i < count;i++) {
                            let para = {
                                name: '第' + i + '期',
                                number: i,
                                is_choose: false
                            }
                            if(i == this.week_number) {
                                para.is_choose = true;
                            }
                            this.weekly.unshift(para)
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                });
            },
            getExpressInfo(express_id) {
                this.$showLoading();
                this.$request({
                    url: this.$api.order.city_map,
                    data: {
                        express_id: express_id,
                    },
                    method: 'POST',
                }).then(response => {
                    this.$hideLoading();
                    this.is_show = true;
                    if (response.code === 0) {
                        this.expressData = response.data.express_data;
                        let {
                            user_longitude, user_latitude,
                            man_longitude, man_latitude,
                            corporation_icon, shop_longitude,
                            shop_latitude
                        } = this.expressData;
                        this.longitude = user_longitude;
                        this.latitude = user_latitude;
                        this.covers[0].longitude = man_longitude;
                        this.covers[0].latitude = man_latitude;
                        this.covers[0].iconPath = corporation_icon;

                        this.covers[1].longitude = user_longitude;
                        this.covers[1].latitude = user_latitude;

                        this.covers[2].longitude = shop_longitude;
                        this.covers[2].latitude = shop_latitude;
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                });
            },
            submitConfirm() {
                let self = this;
                uni.showLoading({title: '收货中'});
                self.$request({
                    url: self.$api.weekly_buy.confirm,
                    data: {
                        order_id: this.order_id,
                        week_number: this.week_number
                    },
                    method: 'post'
                }).then(response => {
                    uni.hideLoading();
                    if (response.code === 0) {
                        this.getDetail();
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    uni.hideLoading();
                });
            },
            submitDelay(e) {
                let self = this;
                if(e > 1) {
                    return false;
                }
                uni.showLoading({title: '操作中'});
                self.$request({
                    url: self.$api.weekly_buy.delay,
                    data: {
                        order_id: this.order_id,
                        week_number: this.week_number,
                        operate: e == 0 ? 'delay' : 'cancel'
                    },
                    method: 'post'
                }).then(response => {
                    uni.hideLoading();
                    if (response.code === 0) {
                        this.getDetail();
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    uni.hideLoading();
                });
            }
        },

        onLoad(option) { this.$commonLoad.onload(option);
            let that = this;
            this.week_number = option.week_number ? option.week_number : 1;
            this.order_id = option.order_id;
            this.order_no = option.order_no ? option.order_no : '';
            this.admin = option.admin;
            if(this.admin == 1) {
                uni.setNavigationBarTitle({
                    title: '物流列表'
                })
            }
            this.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            this.getDetail();
        }
    }
</script>

<style scoped lang="scss">
    .delay-info {
        height: 90rpx;
        line-height: 90rpx;
        width: 100%;
        background-color: #ECF0FE;
        color: #426DFC;
        font-size: 30rpx;
        padding-left: 24rpx;
        margin-top: 20rpx;
    }
    .express-list {
        width: 702rpx;
        margin: 24rpx;
        border-radius: 16rpx;
        background-color: #fff;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #999999;
        .to-more {
            height: #{24rpx};
            width: #{12rpx};
            display: block;
        }
        .express-label {
            font-weight: 600;
            color: #333333;
            flex-shrink: 0;
            &+view {
                max-width: 507rpx;
            }
        }
        .express-info {
            padding: 24rpx 0;
            border-bottom: 1rpx solid rgba(0,0,0,.1);
            &.no-border {
                border-bottom: 0;
            }
        }
        .express-remark {
            padding: 20rpx 0;
            .express-label {
                margin-bottom: 15rpx;
                &+view {
                    min-height: 38rpx;
                }
            }
        }
    }
    .express-box-info {
        width: 702rpx;
        margin: 0 24rpx;
        border-radius: 16rpx;
        padding: 0 #{25rpx} #{24rpx};
        background-color: #fff;
        margin-top: #{25rpx};
        font-size: 28rpx;
        color: #333333;
        .express-title {
            height: 88rpx;
            line-height: 88rpx;
            border-bottom: 1rpx solid rgba(0,0,0,.1);
            font-weight: 600;
            margin-bottom: 8rpx;
        }
        .express-item {
            margin-top: 5rpx;
            height: 54rpx;
            .detail-btn {
                border: 1#{rpx} solid #bbbbbb;
                border-radius: #{27rpx};
                padding: 0 30#{rpx};
                height: 54rpx;
                font-size: 24rpx;
            }
        }
        .label {
            margin-right: 20rpx;
        }
    }
    .logistics-box {
        width: 702rpx;
        margin: 0 24rpx;
        border-radius: 16rpx;
        padding: #{20rpx} #{25rpx};
        background-color: #fff;
        margin-top: #{25rpx};
        font-size: $uni-font-size-weak-two;
        color: $uni-general-color-two;
    }

    .logistics-box .item-box {
        border-left: #{1rpx} solid $uni-weak-color-one;
        padding-left: #{45rpx};
        position: relative;
    }

    .logistics-box .item {
        margin-bottom: #{25rpx};
        padding-bottom: #{25rpx};
        border-bottom: #{1rpx} solid $uni-weak-color-one;
    }

    .logistics-box .item .sign {
        width: #{16rpx};
        height: #{16rpx};
        position: absolute;
        left: #{-7rpx};
    }

    .logistics-box .item .sign-big {
        width: #{32rpx};
        height: #{32rpx};
        position: absolute;
        left: #{-16rpx};
    }

    .sign-text {
        color: #25ae5f;
    }
    .empty-box {
        font-size: $uni-font-size-general-one;
    }
    .title {
        padding: 0 24rpx;
        height: 70rpx;
        color: #999999;
        font-size: 28rpx;
        &.toggle {
            position: fixed;
            background-color: #fff;
            z-index: 101;
            width: 100%;
            top: 0;
            left: 0;
        }
        .title-name {
            display: inline-block;
            padding: 16rpx 0 8rpx;
            border-bottom: 4rpx solid;
            margin: 0 24rpx;
        }
        image {
            width: 28rpx;
            height: 19rpx;
            margin-left: 10rpx;
        }
    }
    .order-list {
        padding: 0 24rpx;
        .order-item {
            .delay-btn {
                padding: 0 32rpx;
                height: 60rpx;
                line-height: 60rpx;
                border-radius: 30rpx;
                border: 1rpx solid;
                font-size: 28rpx;
                &.clerk {
                    border: 0;
                    color: #fff;
                    height: 62rpx;
                    line-height: 62rpx;
                    margin-left: 20rpx;
                }
            }
            background-color: #fff;
            border-radius: 16rpx;
            margin-top: 20rpx;
            padding: 0 24rpx;
            .order-info {
                height: 82rpx;
                color: #333333;
                font-size: 28rpx;
                border-bottom: 1rpx solid rgba(0,0,0,.1);
                .order-status {
                    color: #FF4544
                }
            }
            .order-goods {
                padding: 20rpx 0;
                .goods-image {
                    height: 156rpx;
                    width: 156rpx;
                    display: block;
                    margin-right: 32rpx;
                    flex-shrink: 0;
                }
                .goods {
                    height: 156rpx;
                    .goods-name {
                        /* #ifndef MP-ALIPAY */
                        height: 68rpx;
                        /* #endif */
                        /* #ifdef MP-ALIPAY */
                        height: 64rpx;
                        /* #endif */
                        font-size: 26rpx;
                        color: #333333;
                        font-weight: 600;
                    }
                    .attr-group {
                        font-size: 24rpx;
                        color: #999999;
                        margin: 8rpx 6rpx 6rpx 0;
                    }
                    .goods-number {
                        font-size: 24rpx;
                        color: #999999;
                    }
                    .goods-weekly {
                        font-size: 24rpx;
                        color: #FF812D;
                    }
                }
            }
            .order-other {
                border-top: 1rpx solid rgba(0,0,0,.1);
                height: 102rpx;
                .order-weekly {
                    font-size: 28rpx;
                    color: #FF812D;
                    image {
                        width: 22rpx;
                        height: 22rpx;
                        margin-right: 16rpx;
                    }
                }
            }
        }
    }
    .dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        z-index: 100;
        .toggle-list {
            position: fixed;
            top: 70rpx;
            left: 0;
            width: 100%;
            z-index: 101;
            border-bottom-left-radius: 16rpx;
            border-bottom-right-radius: 16rpx;
            background-color: #fff;
            .toggle-item {
                height: 80rpx;
                padding: 0 24rpx 0 48rpx;
                font-size: 28rpx;
                color: #333;
                image {
                    width: 20rpx;
                    height: 20rpx;
                }
            }
        }
    }
    .qrcode-box {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        .item {
            position: absolute;
            top: 25%;
            width: 562#{rpx};
            height: 562#{rpx};
            background: #fff;
            left: 94#{rpx};
            z-index: 999;
            border-radius: 15#{rpx};
            .remove {
                position: absolute;
                top: 0;
                right: 0;
                width: 50#{rpx};
                height: 50#{rpx};
                margin: 15#{rpx};
                padding: #{7rpx}
            }
        }
        .img {
            margin-top: 30#{rpx};
            width: 375#{rpx};
            height: 375#{rpx};
        }
    }
    .city-box {
        margin: #{24rpx};
        background-color: #ffffff;
        padding: #{30rpx};
        border-radius: #{16rpx};
        .express-status {
            border-bottom: 1rpx solid rgba(0,0,0,.1);
            padding-bottom: 25rpx;
            margin-bottom: 20rpx;
        }

        .status-label {
            font-weight: 800;
            font-size: #{32rpx};
            color: #353535;
        }

        .time-label {
            font-size: #{28rpx};
            color: #353535;
            margin-top: #{21rpx};
        }

        .corporation-box {

            .corporation-icon {
                width: #{40rpx};
                height: #{40rpx};
                margin-right: #{14rpx};
            }

            .corporation-name {
                font-size: #{28rpx};
                color: #666666;
            }
        }
    }

    .city-service {
        width: 100%;
        margin-bottom: 10#{rpx};

        .await-man {
            margin-left: #{12rpx};
            font-size: #{28rpx};
            color:#666666;
        }

        .info-box {
            margin-left: #{12rpx};

            .info-man {
                font-size: #{28rpx};
                color: #666666;
            }
        }

        .head {
            width: #{50rpx};
            height: #{50rpx};
            margin-right: 20rpx;
        }

        .icon-box {
            padding: 0 #{30rpx};
            border-left: #{1rpx} solid #f7f7f7;

            .icon {
                width: #{45rpx};
                height: #{45rpx};
            }
        }
    }
</style>